{% load staticfiles %}
<!DOCTYPE html>
<!-- Template by Quackit.com -->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>PYTHON HTML</title>
    
    <!-- Bootstrap Core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <!-- Logo and responsive toggle -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-globe"></span>Logo</a>
            </div>
            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="navbar">
		<ul class="nav navbar-nav">
			<li class="active">
				<a href="">站点管理</a>
			</li>
			<li>
				<a href="#">关于</a>
			</li>
			<li>
				<a href="#">产品</a>
			</li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">服务 <span class="caret"></span></a>
				<ul class="dropdown-menu" aria-labelledby="about-us">
					<li><a href="#">文档</a></li>
					<li><a href="#">客服</a></li>
					<li><a href="#">帮助</a></li>
				</ul>
			</li>    
		</ul>

		<!-- Search -->
		<form class="navbar-form navbar-right" role="search">
			<div class="form-group">
				<input type="text" class="form-control">
			</div>
			<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
		</form>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

	<div class="container-fluid">
		<!-- Center Column -->
		<div class="col-sm-8">		
			<!-- Articles -->
            {% for article in article_list %}
			<div class="row">
				<article class="col-xs-12">
					<h2>
						<a id="article_title" href="/blog/detail/{{ article.id }}/">{{ article.atitle }}</a>
					</h2>
                    {# truncatechars_html限制字符长度的内置过滤器 #}
					<p>{{ article.acontent | truncatechars_html:80 }}</p>
					<p class="pull-right">
						<span class="label label-default">{{ article.article_type }}</span>
						<span class="label label-default">{{ article.author }}</span>
					</p>
					<ul class="list-inline">
						<li><a href="#">{{ article.apub_time }}</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-comment"></span>{{ article.acomment_num }} 评论</a></li>
						<li>
							<a href="#"><span class="glyphicon glyphicon-heart"></span> {{ article.akeep_num }} 收藏</a>
						</li>
                        <li>
							<a href="#"><span class="glyphicon glyphicon-share"></span> {{ article.apoll_num }} 赞</a>
						</li>
					</ul>
				</article>
			</div>
            {% endfor %}
		</div><!--/Center Column-->


	  <!-- Right Column -->
	  <div class="col-sm-3">
            {% if user %}
	  		<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<span class="glyphicon glyphicon-log-in"></span> 
						已登录
					</h3>
				</div>
				<div class="panel-body">
					<div class="form-group">
						你好：{{ user }} <a href="/blog/logout/"><input type="submit" class="btn btn-default" value="注销"></a>
					</div>
				</div>
			</div>
			<!-- Form -->
            {% else %}
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<span class="glyphicon glyphicon-log-in"></span> 
						登录
					</h3>
				</div>
				<div class="panel-body">
					<form action="/blog/login/" method="post">
                        {% csrf_token %}
						<div class="form-group">
                            {{ login_form.username }}
						</div>
						<div class="form-group">
                            {{ login_form.password }}
						</div>
						<button type="submit" class="btn btn-default">登录</button>
                                                                     <a href="/blog/register/">忘记密码?去注册...</a>
					</form>
				</div>
			</div>
            {% endif %}
	  </div><!--/Right Column -->

	</div><!--/container-fluid-->

        <div class="small-print">
        	<div class="container bottom">
                <hr>
        		<p class="text-center">Copyright &copy; Example.com 2015 </p>
        	</div>
        </div>
	</footer>

	
	<!-- jQuery -->
	<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="{% static 'js/bootstrap.min.js' %}"></script>
	
	<!-- IE10 viewport bug workaround -->
	<script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>	
</body>

</html>
